<template>
  <div>
    <el-dialog
      title="注单详情"
      v-model="state.isShow"
      lock-scroll
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      draggable
      align-center
      width="400px"
      @closed="closed"
    >
      <div class="flex justify-between flex-col">
        <div class="text-[14px] flex border text-center bg-[#e3e5f1] !border-[#ccc]">
          <div class="flex-1 py-[10px] border-right !border-[#ccc]">位置</div>
          <div class="flex-1 py-[10px] border-right !border-[#ccc]">号码</div>
          <div class="flex-1 py-[10px]">金额</div>
        </div>
        <ul class="max-h-[400px] overflow-y-auto border-bottom !border-[#ccc]">
          <template v-for="item in list">
            <li class="text-[14px] flex border text-center !border-t-0 !border-[#ccc]">
              <div class="flex-1 py-[10px] border-right !border-[#ccc]">{{ item.Cat2 }}</div>
              <div class="flex-1 py-[10px] border-right !border-[#ccc]">{{ item.Cat3 }}</div>
              <div class="flex-1 py-[10px]">{{ item.Amount }}</div>
            </li>
          </template>
        </ul>
      </div>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
withDefaults(
  defineProps<{
    list: BetDetail[];
  }>(),
  {}
);
const state = reactive({
  isShow: false
});
const closed = () => {
  state.isShow = false;
};
const open = () => {
  state.isShow = true;
};

defineExpose({
  open
});
</script>
<style scoped lang="scss">
:deep(.el-dialog__body) {
  padding: 20px;
}
</style>
